<template>
  <div class="detailHeader">
    <div class="head">
      <div class="bg" :style="styleObj"></div>
      <div class="back">
        <i class="iconfont icon-zuo" @click="$router.go(-1)"></i>
        <div>
          <i class="iconfont icon-shoucang"></i>
          <i class="iconfont icon-fenxiang"></i>
        </div>
      </div>
      <div class="movieInfo" v-if="detail">
        <div class="imgBox">
          <img :src="detail.image" alt />
          <div class="movieType">
            <p v-if="detail.is3D">3D</p>
            <p v-if="detail.isIMAX3D">IMAX 3D</p>
            <p v-if="detail.isDMAX">中国巨幕</p>
          </div>
        </div>
        <div>
          <h2 class="titleCn">{{detail.titleCn}}</h2>
          <p class="titleEn">{{detail.titleEn}}</p>
          <p class="score" v-if="detail.rating>0">{{detail.rating}}</p>
          <div>
            <p class="runtime">
              <span v-if="detail.isEggHunt">有彩蛋 -</span>
              {{detail.runTime}}
            </p>
            <div class="type">
              <span v-for="item in detail.type" :key="item">{{item}}</span>
            </div>
            <p class="showDay">{{detail.release.date}}{{detail.release.location}}上映</p>
          </div>
          <div class="btnBox">
            <button>我想看</button>
            <button>我要评价</button>
          </div>
        </div>
      </div>
      <p class="commonSpecial">{{detail.commonSpecial}}</p>
      <div class="lookInfo">查影讯/购票</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "detailHeader",
  props: {
    detail: Object,
    styleObj: Object
  },
  data() {
    return {};
  },
  created() {
    // this.$http
    //   .get("/api/movieDetail", {
    //     params: {
    //       id: this.$route.params.id
    //     }
    //   })
    //   .then(res => {
    //     console.log(res);
    //     this.detail = res.data.data;
    //     this.styleObj.backgroundImage = `url(${this.detail.image})`;
    //   });
  },
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.detailHeader {
  .head {
    position: relative;
    .bg {
      position: absolute;
      top: 0;
      width: 100%;
      height: vw(130);
      background-size: 100%;
      background-repeat: no-repeat;
      filter: blur(5px);
      z-index: -1;
    }
    .back {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: vw(16) vw(20);
      i {
        font-size: vw(22);
        color: #eee;
      }
      div {
        display: flex;
        align-items: center;
        i {
          margin-right: vw(6);
        }
        i:nth-child(1) {
          font-size: vw(38);
        }
      }
    }
    .movieInfo {
      display: flex;
      background: url("../../../assets/images/movieDetailBg.png") no-repeat;
      background-size: 100%;
      background-position-y: vw(46);
      .imgBox {
        position: relative;
        img {
          width: vw(120);
          height: vw(190);
        }
        .movieType {
          position: absolute;
          top: vw(10);
          right: vw(6);
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 0;
          p {
            display: flex;
            align-items: center;
            justify-content: center;
            width: vw(30);
            height: vw(30);
            border: 1px solid #fff;
            border-radius: vw(5);
            margin-bottom: vw(10);
            text-align: center;
            color: #fff;
            font-size: vw(10);
            font-weight: normal;
            background: rgba(0, 0, 0, 0.3);
          }
        }
      }
      > div {
        margin-left: vw(15);
        position: relative;
        .titleCn {
          font-size: vw(20);
          color: #fff;
        }
        .titleEn {
          font-size: vw(14);
          color: #fff;
        }
        .score {
          width: vw(32);
          height: vw(32);
          background: #659d0e;
          color: #fff;
          line-height: vw(32);
          text-align: center;
          position: absolute;
          top: vw(35);
          right: vw(20);
          font-size: vw(16);
        }
        div {
          margin-top: vw(20);
          font-size: vw(14);
          font-weight: bold;
          .runtime {
            span {
              color: #659d0e;
            }
          }
        }
        .type {
          margin: vw(5) 0;
          display: flex;
          span {
            margin-right: vw(10);
          }
        }
      }
      .btnBox {
        display: flex;
        button {
          width: vw(100);
          height: vw(46);
          line-height: vw(46);
          text-align: center;
          border: 1px solid #999;
          border-radius: vw(20);
          margin-right: vw(10);
          font-size: vw(20);
          color: #999;
          background: #fff;
        }
        button:nth-child(2) {
          color: #659c0d;
          border: 1px solid #659c0d;
        }
      }
    }
    .commonSpecial {
      font-size: vw(18);
      color: #fd8900;
      padding: vw(10) 0;
      text-align: center;
    }
    .lookInfo {
      width: vw(300);
      height: vw(50);
      line-height: vw(50);
      text-align: center;
      font-size: vw(20);
      color: #fff;
      background: #ff8600;
      margin: 0 auto vw(20);
      border-radius: vw(30);
    }
  }
}
</style>